<template>
  <Page
    title="流程监控"
    description="实时监控流程执行情况，统计分析流程数据"
  >
    <div class="workflow-monitor">
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <Card class="stat-card">
          <Statistic
            title="运行中的流程"
            :value="stats.runningCount"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <PlayCircleOutlined />
            </template>
          </Statistic>
        </Card>
        <Card class="stat-card">
          <Statistic
            title="待办任务"
            :value="stats.todoTaskCount"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <InboxOutlined />
            </template>
          </Statistic>
        </Card>
        <Card class="stat-card">
          <Statistic
            title="今日完成"
            :value="stats.todayCompletedCount"
            :value-style="{ color: '#52c41a' }"
          >
            <template #prefix>
              <CheckCircleOutlined />
            </template>
          </Statistic>
        </Card>
        <Card class="stat-card">
          <Statistic
            title="总流程数"
            :value="stats.totalCount"
          >
            <template #prefix>
              <FileTextOutlined />
            </template>
          </Statistic>
        </Card>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <Card title="流程启动趋势" class="chart-card">
          <div class="chart-placeholder">
            <Empty description="图表开发中，可集成 ECharts 或其他图表库" />
          </div>
        </Card>

        <Card title="流程分类统计" class="chart-card">
          <div class="chart-placeholder">
            <Empty description="图表开发中，可集成 ECharts 或其他图表库" />
          </div>
        </Card>
      </div>

      <!-- 最近流程实例 -->
      <Card title="最近流程实例" class="recent-instances">
        <Table
          :columns="columns"
          :data-source="recentInstances"
          :pagination="false"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'state'">
              <Tag v-if="record.state === 'ACTIVE'" color="processing">
                运行中
              </Tag>
              <Tag v-else-if="record.state === 'SUSPENDED'" color="warning">
                已挂起
              </Tag>
              <Tag v-else-if="record.state === 'COMPLETED'" color="success">
                已完成
              </Tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <Space>
                <Button type="link" size="small" @click="handleViewDetail(record)">
                  查看详情
                </Button>
              </Space>
            </template>
          </template>
        </Table>
      </Card>
    </div>
  </Page>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';

import {
  Button,
  Card,
  Empty,
  Space,
  Statistic,
  Table,
  Tag,
} from 'ant-design-vue';
import {
  CheckCircleOutlined,
  FileTextOutlined,
  InboxOutlined,
  PlayCircleOutlined,
} from '@ant-design/icons-vue';

import type { ProcessInstance } from '#/api/workflow';
import { getProcessInstanceListApi } from '#/api/workflow';

const router = useRouter();

// 统计数据
const stats = reactive({
  runningCount: 0,
  todoTaskCount: 0,
  todayCompletedCount: 0,
  totalCount: 0,
});

// 最近实例
const loading = ref(false);
const recentInstances = ref<ProcessInstance[]>([]);

// 表格列配置
const columns = [
  {
    title: '流程名称',
    dataIndex: 'processDefinitionName',
    key: 'processDefinitionName',
  },
  {
    title: '业务键',
    dataIndex: 'businessKey',
    key: 'businessKey',
  },
  {
    title: '发起人',
    dataIndex: 'startUserId',
    key: 'startUserId',
  },
  {
    title: '状态',
    key: 'state',
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
  },
];

// 加载统计数据
async function loadStats() {
  try {
    // TODO: 调用统计接口
    // 这里使用模拟数据
    stats.runningCount = 15;
    stats.todoTaskCount = 23;
    stats.todayCompletedCount = 8;
    stats.totalCount = 156;
  } catch (error: any) {
    // 忽略错误
  }
}

// 加载最近实例
async function loadRecentInstances() {
  loading.value = true;
  try {
    const data = await getProcessInstanceListApi({
      pageNum: 1,
      pageSize: 10,
    });
    recentInstances.value = data.list;
  } catch (error: any) {
    // 忽略错误
  } finally {
    loading.value = false;
  }
}

// 查看详情
function handleViewDetail(record: ProcessInstance) {
  router.push(`/workflow/instance/detail/${record.id}`);
}

// TODO: 后台接口未完成，暂时注释掉自动加载
// onMounted(async () => {
//   await loadStats();
//   await loadRecentInstances();
// });
</script>

<style scoped>
.workflow-monitor {
  padding: 16px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  min-height: 120px;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.chart-card {
  min-height: 300px;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.recent-instances {
  margin-bottom: 16px;
}
</style>

